<template>
	<div class="topic">
		<div class="topic_box"
			 v-for="(item,index) in topicList"
			 :key="item.id">
			<img :src="item.scene_pic_url"
				 alt=""
				 width="100%"
				 style="display: block">
			<h3>{{item.title}}</h3>
			<p>{{item.subtitle}}</p>
			<span>{{item.price_info | RMBformat}}</span>
		</div>

		<van-pagination v-model="page"
						:page-count="totalPages"
						mode="simple"
						@change="paginationClick" />

	</div>
</template>

<script>
import { getTopicData } from "@/network/api";
export default {
	created() {
    this.getTopicData()
	},
	name: "Topic",
	data() {
		return {
			page: 1,
			size: 10,
			// 专题数据
			topicList: [],
			// 总条数
			count: 0,
			// 总页数
			totalPages: 0
		}
	},
	methods: {
    // 查询专题数据
		getTopicData() {
			getTopicData(this.page, this.size).then(res => {
				if (res.errno == 0) {
					console.log(res);
					this.count = res.data.count
					this.topicList = res.data.data
					this.totalPages = res.data.totalPages
				}
			})
		},
    paginationClick() {
      this.getTopicData()
    }
	}
}
</script>

<style lang="less" scoped>
.topic_box {
	background-color: #fff;
	text-align: center;
	margin-bottom: 0.15rem;
	padding-bottom: 0.1rem;
	overflow: hidden;
	img {
		height: 2.88rem;
	}
	span {
		display: block;
	}
	h3,
	p,
	span {
		margin: 0.1rem 0;
	}
	h3 {
		font-size: 0.18rem;
	}
	p {
		font-size: 0.16rem;
		color: #1f1f1f;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 0.16rem;
	}
	span {
		color: #9b0000;
		font-size: 0.14rem;
		margin-top: 0.2rem;
	}
}

.van-pagination {
	width: 100%;
	height: 0.5rem;
	background: #efefef;
	// z-index: 2;
}
</style>